<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="购物车"
        left-arrow
        @click-left="$router.back()"
      >
      </van-nav-bar>
    </header>
    <div class="content">
      <div v-if="empty">
        <van-empty description="购物车空空如也">
          <van-button @click="$router.push('/kind')" round type="danger" class="bottom-button">立即选购</van-button>
        </van-empty>
      </div>
      <div v-else>
        <van-swipe-cell
          v-for="(item, index) of cartList"
          :key="item.cartid"
        >
          <van-card
            :price="item.originprice"
            :title="item.proname"
          >
            <template #num>
              <van-stepper v-model="item.num" theme="round" button-size="22" @change="updateNumFn(item.cartid, item.num)"/>
            </template>
            <template #thumb>
              <van-checkbox class="checkboxone" v-model="item.flag" @change="selectOne(item)"></van-checkbox>
              <van-image :src="item.img1"></van-image>
            </template>
          </van-card>
          <template #right>
            <van-button square type="danger" @click="deleteItem(item.cartid, index)" class="delete-button" text="删除" />
          </template>
        </van-swipe-cell>
        <van-submit-bar @submit="addOrder" :disabled="totalNum === 0" :price="totalPrice" :button-text="totalNum > 99 ? '提交(99+)' : '提交('+ totalNum +')'" >
          <van-checkbox v-model="checked" @click="selectAll"></van-checkbox>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Empty, NavBar, Button, Card, Stepper, SwipeCell, SubmitBar, Checkbox, Dialog } from 'vant'

import { getCartList, removeCartItem, updatenum, selectall, selectone } from '@/api/cart'
import { getStorage } from '../../utils/storage'
import { addOrderFn } from '@/api/order'
Vue.use(Empty)
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Card)
Vue.use(Stepper)
Vue.use(SwipeCell)
Vue.use(SubmitBar)
Vue.use(Checkbox)
Vue.use(Dialog)
export default {
  computed: {
    totalPrice () {
      return this.cartList.reduce((sum, item) => {
        return item.flag ? sum + item.num * item.originprice : sum + 0
      }, 0) * 100
    },
    totalNum () {
      return this.cartList.reduce((sum, item) => {
        return item.flag ? sum + item.num : sum + 0
      }, 0)
    }
  },
  beforeRouteEnter (to, from, next) {
    if (getStorage('loginState') === 'true') {
      next()
    } else {
      next('/login')
    }
  },
  data () {
    return {
      cartList: [],
      empty: true,
      checked: false // 全选的状态
    }
  },
  methods: {
    addOrder () {
      addOrderFn({ userid: getStorage('userid') }).then(res => {
        console.log(res.data)
        this.$router.push('/order/' + res.data.time)
      })
    },
    selectOne (item) {
      const { cartid, flag } = item
      console.log(cartid, flag)
      selectone({ cartid, flag }).then((res) => {
        if (flag) {
          this.checked = this.cartList.every(item => item.flag)
        } else {
          this.checked = false
        }
      })
    },
    selectAll () {
      selectall({
        userid: getStorage('userid'),
        type: this.checked
      }).then(res => {
        const arr = this.cartList
        arr.forEach(item => {
          item.flag = this.checked
        })
        this.cartList = arr
      })
    },
    updateNumFn (cartid, num) {
      console.log(cartid, num)
      updatenum({ cartid, num }).then(res => {
        console.log('更新成功')
      })
    },
    deleteItem (cartid, index) {
      console.log(cartid)
      Dialog.confirm({
        message: '确定删除吗？'
      }).then(() => {
        removeCartItem({ cartid }).then(res => {
          this.cartList.splice(index, 1)
          // 判断有没有数据
          this.empty = this.cartList.length === 0
        })
      }).catch(() => {})
    }
  },
  mounted () {
    getCartList({ userid: getStorage('userid') }).then(res => {
      console.log('111', res.data)
      if (res.data.code === '10020') {
        this.empty = true
      } else {
        this.empty = false
        this.cartList = res.data.data
      }
    })
  },
  watch: {
    cartList (newVal, oldVal) {
      this.checked = newVal.every(item => item.flag)
    }
  }
}
</script>

<style lang="stylus" scoped>
.delete-button {
  height: 100%;
}
.van-card {
  background-color: #fff
}
.van-card__thumb {
  display: flex;
  width: 128px;
  .checkboxone {
    width: 30px;
  }
  .van-image {
    width: 88px;
    height: 88px;
    margin-left: 10px
  }
}
</style>
